<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>Welcome to SoroShop · Soro</title>
    <style type="text/css">

        body {
            width: 100%;
            min-width: 1000px;
        }


        header {
            padding: 40px 60px;
        }

        main {
            padding: 10px 60px 40px;
        }

        footer {
            border-top-style: solid;
            border-width: thin;
            height: 100px;
            padding: 40px 60px;
        }

        .logo {
            font-size: 35px;
            font-weight: bold;
        }

        .header_lockup {
            height: 50px;
        }

        .header_item1 {
            display: inline-block;
            padding: 0;
            height: 50px;
        }

        .header_item2 {
            display: inline-block;
            height: 50px;
            width: 800px;
            float: right;
            font-family: 'Lantinghei SC', 'STSong', serif;
            padding-top: 20px;
        }

        .top-list {
            float: right;
        }

        .top-list_item {
            float: left;
            list-style: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        /*上面是header*/

        .left-list {
            list-style: none;
            margin: 0;
            padding-left: 0;
        }

        .left-list_item {
            font-weight: bolder;
            font-size: 18px;
            padding-top: 20px;
        }

        .row {
            width: 100%;
        }

        .col1 {
            vertical-align: top;
            display: inline-block;
            padding: 0 110px 0 0;
        }

        .col2 {
            display: inline-block;
            padding: 10px 0;
        }

        .picture-frame {
            padding-right: 150px;
            background-image: url("../static/1-1-2副本-1-1920x1001.jpg");
            width: 1300px;
            height: 500px;
            margin-bottom: 50px;
        }

        .focus-product {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 25px;
        }

        .p-row {
            width: 1500px;
        }

        .p {
            height: 350px;
            width: 350px;
            padding: 30px 15px 0 0;
            display: inline-block;
            margin-bottom: 200px;
            margin-top: 30px;
        }

        .p1 {
            height: 350px;
            width: 350px;
            background-image: url("../static/宠物狗 驱虫剂.jpg");
            background-size: 350px 350px;
        }

        .p2 {
            height: 350px;
            width: 350px;
            background-image: url("../static/p2.jpg");
            background-size: 350px 350px;
        }

        .p3 {
            height: 350px;
            width: 350px;
            background-image: url("../static/宠物狗 杀菌消毒沐浴露.jpg");
            background-size: 350px 350px;
        }

        .p4 {
            height: 350px;
            width: 350px;
            background-image: url("../static/宠物狗 洁齿磨牙棒.jpg");
            background-size: 350px 350px;
        }

        .p5 {
            height: 350px;
            width: 350px;
            background-image: url("../static/宠物狗 牵引绳 项圈.jpg");
            background-size: 350px 350px;
        }

        .p6 {
            height: 350px;
            width: 350px;
            background-image: url("../static/p6.jpg");
            background-size: 350px 350px;
        }

        .p7 {
            height: 350px;
            width: 350px;
            background-image: url("../static/宠物玩具 毛线球.jpg");
            background-size: 350px 350px;
        }

        .p8 {
            height: 350px;
            width: 350px;
            background-image: url("../static/p8.jpg");
            background-size: 350px 350px;
        }

        .p_item1 {
            margin-bottom: 20px;
        }

        .p_item2 {
            padding-bottom: 20px;
            display: inline-block;
            width: 350px;
        }

        .p_item2 div {
            display: inline-block;
        }

        .details {
            margin: 0 10px;
            float: right;
        }

        .p_item3 {
            width: 350px;
        }

        .title {
            margin: 0 10px;
        }

        .price {
            margin: 0 10px;
            padding: 10px 0;
            display: inline-block;
        }

        .layui-btn {
            display: inline-block;
            float: right;
        }

        .sort-line {
            float: right;
        }

        .p_item3 {
            float: right;
        }
    </style>
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
    <script th:inline="javascript">
        var userId = 0;
        var productId = 5;
        var amount = 1;

        if([[${session.userId}]] != null) {
            userId = [[${session.userId}]];
        }

        function f(p, userId, productId, amount) {
            document.getElementById(p).setAttribute("href", "/add_item?userId=" + userId
                + "&productId=" + productId + "&amount=" + amount);
            alert("添加成功");
        }

        function p1() {
            f("p1", userId, 9 , 1);
        }

        function p2() {
            f("p2", userId, 1, 1);
        }

        function p3() {
            f("p3", userId, 10, 1);
        }

        function p4() {
            f("p4", userId, 11, 1);
        }

        function p5() {
            f("p5", userId, 12, 1);
        }

        function p6() {
            f("p6", userId, 6, 1);
        }

        function p7() {
            f("p7", userId, 13, 1);
        }

        function p8() {
            f("p8", userId, 8, 1);
        }
    </script>
</head>
<body>
<header class="header">
    <div class="header_lockup">
        <div class="header_item1">
            <a class="logo">Soro</a></div>
        <div class="header_item2">
            <ul class="top-list">
                <li class="top-list_item" style="padding-right: 50px"><a href="/">首页</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/shop">产品</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/appointment">上门预约</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/about">关于我们</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/join">注册</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/cart">购物车</a></li>
                <li class="top-list_item" style="margin-right: 30px">
                    <a href="/personal" th:if="${session.username != null}" th:text="${session.username}">登录</a>
                    <a href="/login" th:if="${session.username == null}">登录</a>
                </li>
                <li class="top-list_item"><a href="/logout" th:if="${session.username != null}">退出</a></li>
            </ul>
        </div>
    </div>
</header>
<main>
    <div class="row">
        <div class="col1">
            <ul class="left-list">
                <li class="left-list_item"><a href="/cat">猫专区</a></li>
                <li class="left-list_item"><a href="/dog">狗专区</a></li>
                <li class="left-list_item"><a href="/date">宠物相亲</a></li>
            </ul>
        </div>
        <div class="col2">
            <div class="picture-frame"></div>
            <div class="focus-product">狗专区</div>
            <div class="p-row">
                <div class="p">
                    <div class="p_item1">
                        <div class="p1"></div>
                    </div>
                    <div class="p_item2">
                        <div class="title">宠物狗 驱虫剂</div>
                        <div class="details">500ml</div>
                    </div>
                    <div class="p_item3">
                        <div class="price">&yen;99</div>
                        <a href="javascript:void(0);" class="layui-btn" id="p1" onclick="p1()">加入购物车</a>
                    </div>

                </div>

                <div class="p">
                    <div class="p_item1">
                        <div class="p2"></div>
                    </div>
                    <div class="p_item2">
                        <div class="title">顶级狗粮</div>
                        <div class="details">5kg</div>
                    </div>
                    <div class="p_item3">
                        <div class="price">&yen;50</div>
                        <a href="javascript:void(0);" class="layui-btn" id="p2" onclick="p2()">加入购物车</a>
                    </div>
                </div>

                <div class="p">
                    <div class="p_item1">
                        <div class="p3"></div>
                    </div>
                    <div class="p_item2">
                        <div class="title">宠物狗 杀菌消毒沐浴露</div>
                        <div class="details">1000ml</div>
                    </div>
                    <div class="p_item3">
                        <div class="price">&yen;99</div>
                        <a href="javascript:void(0);" class="layui-btn" id="p3" onclick="p3()">加入购物车</a>
                    </div>
                </div>

                <div class="p">
                    <div class="p_item1">
                        <div class="p4"></div>
                    </div>
                    <div class="p_item2">
                        <div class="title">宠物狗 洁齿磨牙棒</div>
                        <div class="details">小型犬</div>
                    </div>
                    <div class="p_item3">
                        <div class="price">&yen;59</div>
                        <a href="javascript:void(0);" class="layui-btn" id="p4" onclick="p4()">加入购物车</a>
                    </div>
                </div>

                <div class="p">
                    <div class="p_item1">
                        <div class="p5"></div>
                    </div>
                    <div class="p_item2">
                        <div class="title">宠物狗 牵引绳项圈</div>
                        <div class="details">中型犬</div>
                    </div>
                    <div class="p_item3">
                        <div class="price">&yen;39</div>
                        <a href="javascript:void(0);" class="layui-btn" id="p5" onclick="p5()">加入购物车</a>
                    </div>
                </div>

                <div class="p">
                    <div class="p_item1">
                        <div class="p6"></div>
                    </div>
                    <div class="p_item2">
                        <div class="title">豪华狗屋</div>
                        <div class="details">普通版</div>
                    </div>
                    <div class="p_item3">
                        <div class="price">&yen;3999</div>
                        <a href="javascript:void(0);" class="layui-btn" id="p6" onclick="p6()">加入购物车</a>
                    </div>
                </div>

                <div class="p">
                    <div class="p_item1">
                        <div class="p7"></div>
                    </div>
                    <div class="p_item2">
                        <div class="title">宠物玩具 毛线球</div>
                        <div class="details">小款</div>
                    </div>
                    <div class="p_item3">
                        <div class="price">&yen;39</div>
                        <a href="javascript:void(0);" class="layui-btn" id="p7" onclick="p7()">加入购物车</a>
                    </div>
                </div>

                <div class="p">
                    <div class="p_item1">
                        <div class="p8"></div>
                    </div>
                    <div class="p_item2">
                        <div class="title">狗仔衫 米奇妙妙屋</div>
                        <div class="details">小型犬</div>
                    </div>
                    <div class="p_item3">
                        <div class="price">&yen;499</div>
                        <a href="javascript:void(0);" class="layui-btn" id="p8" onclick="p8()">加入购物车</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<footer class="container-fluid ps-footer p-wrap">
    <div class="ps-header__slogan">美好宠物生活	Live with pet better</div>
    <div class="d-sm-flex justify-content-sm-between flex-nowrap">
        <div class="ps-footer__main">
            <div class="p-div">
            </div>
            <nav class="p-div"><ul class="p-list">
                <li class="p-list__item">
                    <a href="/">首页</a>
                </li>
                <li class="p-list__item">
                    <a href="/shop">产品</a>
                </li>
                <li class="p-list__item">
                    <a href="/appointment">上门预约</a>
                </li>
                <li class="p-list__item">
                    <a href="/about">关于我们</a>
                </li>
                <li class="p-list__item">
                    <a href="/join">注册</a>
                </li>
                <li class="p-list__item">
                    <a href="/cart">购物车</a>
                </li>
                <li class="p-list__item ps-lang">
                    <a href="/personal">个人中心</a>
                </li>
            </ul> </nav>
            <div><a href="http://www.beian.miit.gov.cn" target="_blank">粤ICP备15057691号-2</a> Copyright © 2020 Soro Co.,Ltd. 瘦肉宠物用品（广东）有限公司</div>
        </div>
        <div class=" ps-footer__extra">
            <div class="p-div"></div>
            <div class="p-div"></div>
            <div class="p-div" style="float: bottom">服务热线：+86 400-920-0674<span class="ps-flag"></span></div>
        </div>
    </div>
</footer>
</body>

</html>